<template>
	<view :class="pageClass" :style="pageStyle" v-if="pageReady">
		<moxi-nav :set="navSet"></moxi-nav>
		<view v-if="status">
			<view style="display: flex;flex-direction: row;justify-content: space-between;" v-if="data.id">
				<view style="margin: 10px;">
					<text style="color: #666;font-size: 14px">{{data.region_info.name}}</text>
					<view style="color: #666;font-size: 15px;margin-top: 5px;display: flex;flex-direction: row;">当前桌号：
					<u-tag shape="circle" :text="data.name" plain size="mini" type="warning"></u-tag>
					</view>
				</view>
				<view class="dcz_icon" :style="'background-color: '+app_color">
					<text style="font-size: 13px;color: #fff">下单中</text>
				</view>
			</view>
			<u-line></u-line>
			<view v-for="(list,key) in modData" :class="list.mod_class"  :style="list.css">
				 <view style="z-index: 110;">
					 <moxi-index  :list="list" ></moxi-index>
				 </view>
			</view>
		</view>
		<view v-else>
			<view style="margin: 10px;;">
				<u-alert title="请扫餐桌二维码进入!" type = "warning" ></u-alert>
				<view style="margin-top: 25px;;">
					<u-button @click="navto('pages/index/index',true)" text="返回首页" :color="app_color"></u-button>
				</view>
			</view>
		</view>
		<moxi-tabbar :set="tabbar" v-if="tabbar.index_id"></moxi-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status:true,
				data:{}
				
			}
		},
		onLoad() {
			
		},
		onShow() {
			if(!this.param||!this.param.id){
				this.status = false;
			}else{
				this.get()
			}
		},
		methods: {
			get(){
				let self = this;
				this.moxiPost('/plugin/diancan/index/index/get_table',{id:this.param.id},function(data){
					self.data = data.data;
				})
			}
		}
	}
</script>

<style>
.dcz_icon{width: 50px;height: 50px;border-radius: 100%;background-color: aquamarine;display: flex;
			justify-content: center;align-items: center;box-shadow: 0 0 5px #ccc;margin: 10px;}
</style>
